<template>
<el-container>
  <el-header>
    <el-row>
      <el-col>
        <el-button size="small" type="primary" @click="toBack">返回</el-button>
      </el-col>
    </el-row>
  </el-header>
  <el-main style="height: auto;">
    <el-card style="width: 30%; height: auto; margin: 0 auto;">
      <el-form :rules="addRules" :model="addPackages" ref="addPackages">
        <el-row>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="套餐名称" label-width="120px" prop="mealName">
              <el-input size="small" style="width: 100%;" v-model="addPackages.mealName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="官方售价(元)" label-width="120px" prop="officialPrice">
              <el-input size="small" style="width: 100%;" v-model="addPackages.officialPrice"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="上限价格(元)" label-width="120px" prop="ceilingPrice">
              <el-input size="small" style="width: 100%;" v-model="addPackages.ceilingPrice"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item class="a" label="有效期" label-width="120px" required>
              <el-col :xl="{ span: 6 }" :lg="{ span: 11 }">
                <el-form-item prop="terOfValidity">
                  <el-input size="small" style="width: 100%;" v-model="addPackages.terOfValidity"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xl="{ span: 6 }" :lg="{ span: 11, push: 2 }">
                <el-form-item prop="dictTerOfValidityName">
                  <el-select size="small" v-model="addPackages.dictTerOfValidityName" placeholder="有效期" style="width: 100%;">
                    <el-option v-for="timeType in addPackages.dictTerOfValiditySelect" :key="timeType.value" :label="timeType.label" :value="timeType.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item class="a" label="套餐规格" label-width="120px">
              <el-col :xl="{ span: 6 }" :lg="{ span: 11 }">
                <el-form-item prop="mealSpec">
                  <el-input size="small" style="width: 100%;" v-model="addPackages.mealSpec"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xl="{ span: 6 }" :lg="{ span: 11, push: 2 }">
                <el-form-item prop="unit">
                  <el-select size="small" v-model="addPackages.unit" placeholder="单位" style="width: 100%;">
                    <el-option v-for="unit in addPackages.unitSelect" :key="unit.value" :label="unit.label" :value="unit.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="套餐类型" label-width="120px" prop="dictMealType">
              <el-select size="small" v-model="addPackages.dictMealType" placeholder="套餐类型" style="width: 100%;">
                <el-option v-for="packages in addPackages.dictMealTypeSelect" :key="packages.value" :label="packages.label" :value="packages.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="所属二级流量池" label-width="120px">
              <el-select size="small" v-model="addPackages.fromFlowCell" placeholder="套餐类型" style="width: 100%;">
                <el-option v-for="flowCell in addPackages.fromFlowCellSelect" :key="flowCell.value" :label="flowCell.label" :value="flowCell.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col><!--el-col(:xl="{ span: 20, push: 2 }")-->
<!--el-form-item(label="是否包含语音" label-width="120px" prop="dictIsVoice")-->
<!--el-radio-group(v-model="addPackages.dictIsVoice")-->
<!--el-radio(label="是") 是-->
<!--el-radio(label="否") 否-->
<!--el-col(:xl="{ span: 20, push: 2 }")-->
<!--el-form-item(label="通电激活" label-width="120px" prop="dictIsEnergizingActivation")-->
<!--el-radio-group(v-model="addPackages.dictIsEnergizingActivation")-->
<!--el-radio(label="是") 是-->
<!--el-radio(label="否") 否-->
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="可否连续充值" label-width="120px" prop="dictIsTerOfValiditySuper">
              <el-radio-group v-model="addPackages.dictIsTerOfValiditySuper">
                <el-radio label="YES">是</el-radio>
                <el-radio label="NO">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="可否预存" label-width="120px" prop="dictIsPreStorage">
              <el-radio-group v-model="addPackages.dictIsPreStorage">
                <el-radio label="YES">是</el-radio>
                <el-radio label="NO">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="是否分月到账" label-width="120px" prop="dictIsPreStorage">
              <el-radio-group v-model="addPackages.dictMonthlyPayment">
                <el-radio label="YES">是</el-radio>
                <el-radio label="NO">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="所属通道" label-width="120px">
              <el-select size="small" v-model="addPackages.dictFromOperator" placeholder="所属通道" style="width: 100%;">
                <el-option v-for="operator in dictFromOperatorSelect" :key="operator" :label="operator" :value="operator"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col class="submit" :xl="{ span: 18, push: 3 }" :lg="{ span: 18, push: 3 }">
            <el-form-item>
              <el-button size="small" type="primary" @click="submitHandle('addPackages')">确定</el-button>
              <el-button size="small" @click="toBack">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </el-main>
</el-container>
</template>

<script>
import { packageconserve, listForAgentForInntSelect,getChannelcompanyForSelect } from '@/api/getData'

export default {
  name: 'AddPackage',
  data() {
    const officialPriceValidate = (rule, value, callback) => {
      if (this.addPackages.ceilingPrice !== '' && this.addPackages.ceilingPrice != null &&
        this.addPackages.officialPrice !== '' && this.addPackages.officialPrice != null) {
        if (this.addPackages.ceilingPrice * 1 < this.addPackages.officialPrice * 1) {
          callback(new Error('官方售价不能大于上限价格'))
        } else {
          callback()
        }
      }
    }
    const ceilingPriceValidate = (rule, value, callback) => {
      if (this.addPackages.ceilingPrice !== '' && this.addPackages.ceilingPrice != null &&
        this.addPackages.officialPrice !== '' && this.addPackages.officialPrice != null) {
        if (this.addPackages.ceilingPrice * 1 < this.addPackages.officialPrice * 1) {
          callback(new Error('上限价格不能小于官方售价'))
        } else {
          callback()
        }
      }
    }
    const validateMealName = (rule, value, callback) => {
      if (value.length > 64) {
        callback(new Error('套餐名称不能超过64位'))
      } else {
        callback()
      }
    }
    return {
      addPackages: {
        terOfValidity: '',
        mealName: '',
        officialPrice: '',
        ceilingPrice: '',
        dictTerOfValidityName: '',
        dictTerOfValiditySelect: [
          {
            value: 'MONTH',
            label: '月'
          },
          {
            value: 'DAY',
            label: '日'
          }
        ],
        dictMonthlyPayment: '',
        mealSpec: '',
        mealSpecForm: '',
        dictIsVoice: '',
        dictIsEnergizingActivation: '',
        dictIsTerOfValiditySuper: '',
        dictIsPreStorage: '',
        dictMealType: '',
        dictMealTypeSelect: [
          {
            value: 'SETMEAL_BASE',
            label: '基础套餐'
          },
          {
            value: 'SETMEAL_ADD_OIL',
            label: '加油包'
          }
        ],
        unitSelect: [
          {
            value: 'G',
            label: 'GB'
          },
          {
            value: 'M',
            label: 'MB'
          }
        ],
        dictFromOperator: '',
        dictFromOperatorSelect: [
          {
            value: 'UNICOM',
            label: '联通'
          },
          {
            value: 'MOBILE',
            label: '移动'
          },
          {
            value: 'TELECOM',
            label: '电信'
          }
        ],
        fromFlowCell: '',
        fromFlowCellSelect: []
      },
      dictFromOperatorSelect: '',
      dictFromOperator: '',
      addRules: {
        terOfValidity: [
          { required: true, message: '请输入有效期', trigger: 'blur' },
          { pattern: /^[1-9]+[0-9]*$/, message: '请输入正确的有效期', trigger: 'blur' }
        ],
        dictTerOfValidityName: [
          { required: true, message: '请选择有效期时间单位', trigger: 'change' }
        ],
        dictMealType: [
          { required: true, message: '请选择套餐类型', trigger: 'blur' }
        ],
        unit: [
          { required: true, message: '请选择套餐规格单位', trigger: 'change' }
        ],
        mealName: [
          { required: true, message: '请输入套餐名称', trigger: 'blur' },
          { validator: validateMealName, trigger: 'blur' }
        ],
        officialPrice: [
          { required: true, message: '请输入套餐价格', trigger: 'blur' },
          { pattern: /^(([1-9][0-9]*)|(([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2})))$/, message: '请输入合法价钱数字,精确到分', trigger: 'blur' },
          { validator: officialPriceValidate }
        ],
        ceilingPrice: [{ required: true, message: '请输入上限价格价格', trigger: 'blur' },
          { pattern: /^(([1-9][0-9]*)|(([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2})))$/, message: '请输入合法价钱数字,精确到分', trigger: 'blur' },
          { validator: ceilingPriceValidate }],
        dictTerOfValiditySelect: [{ required: true, message: '请选择有效期单位', trigger: 'blur' }],
        mealSpec: [
          { required: true, message: '请输入套餐规格', trigger: 'blur' },
          { pattern: /^(([1-9][0-9]*)|(([0]\.\d{0,1}|[1-9][0-9]*\.\d{0,1})))$/, message: '请输入有效的套餐,精确到小数点后一位', trigger: 'blur' }
        ],
        dictIsTerOfValiditySuper: [{ required: true, message: '请选择有效期是否叠加', trigger: 'blur' }],
        dictIsPreStorage: [{ required: true, message: '请选择可否预存', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    toBack() {
      this.$router.back(-1)
    },
    async initData() {
      const returnData = await listForAgentForInntSelect({
      })
      this.fromFlowCellSelect = []
      if (returnData._result) {
        for (let i = 0; i < returnData.data.length; i++) {
          const obj = {}
          obj.value = returnData.data[i].id
          obj.label = returnData.data[i].flowPoolName
          this.fromFlowCellSelect.push(obj)
        }
      }
    },

    submitHandle(addPackages) {
      if (this.addPackages.unit === 'G') {
        this.addPackages.mealSpec = this.addPackages.mealSpec * 1024
      }
      this.$refs[addPackages].validate(async valid => {
        if (valid) {
          if (this.addPackages.dictTerOfValiditySelect.value === 'DAY') {
            this.addPackages.dictTerOfValidity = '日'
          }
          if (this.addPackages.dictTerOfValiditySelect.value === 'MONTH') {
            this.addPackages.dictTerOfValidity = '月'
          }
          if (this.addPackages.dictMealTypeSelect.value === 'SETMEAL_BASE') {
            this.addPackages.dictMealType = '基础套餐'
          }
          if (this.addPackages.dictMealTypeSelect.value === 'SETMEAL_ADD_OIL') {
            this.addPackages.dictMealType = '加油包'
          }
          const returnData = await packageconserve({
            mealName: this.addPackages.mealName,
            officialPrice: this.addPackages.officialPrice,
            ceilingPrice: this.addPackages.ceilingPrice,
            terOfValidity: this.addPackages.terOfValidity,
            dictTerOfValidity: this.addPackages.dictTerOfValidityName,
            // dictTerOfValidityName: this.addPackages.terOfValidity + this.addPackages.dictTerOfValiditySelect.value,
            mealSpec: this.addPackages.mealSpec,
            // dictIsVoice: this.addPackages.dictIsVoice,
            // dictIsEnergizingActivation: this.addPackages.dictIsEnergizingActivation,
            dictIsTerOfValiditySuper: this.addPackages.dictIsTerOfValiditySuper,
            dictIsPreStorage: this.addPackages.dictIsPreStorage,
            dictMealType: this.addPackages.dictMealType
          })
          if (returnData._result) {
            this.$message({ message: '添加用户成功', type: 'success' })
            this.$router.back(-1)
          } else {
            return false
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.el-container {
  .el-header {
    margin-top: 5vh;
  }
  .el-main {
    .el-col /deep/ .el-form-item {
      margin-bottom: 20px !important;
    }
    .submit /deep/ .el-form-item__content {
      display: flex;
      justify-content: space-between;
    }

    .el-select.el-select--small /deep/ input {
      text-align: center;
    }
  }
}
.el-select-dropdown__item {
  text-align: center;
}
.a {
  margin-bottom: 0 !important;
}
</style>
